<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>世界纪元</title>
    <!-- 初始化页面样式 -->
    <link rel="stylesheet" href="../../css/init.css" />
    <link rel="stylesheet" href="../../css/05.css" />
    <script src="../../js/rem.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css">
</head>

<body>
    <div class="main-02 main-05 bj-option">
        <!--喇叭-->
        <img src="../../img/02/btn-mute.png" class="mute-icon" alt="">
        <div class="top">
            <div class="left">
                <img src="../../img/02/logo.png" class="logo-image" alt="">
                <div class="text">
                    <div class="text-01">世界纪元</div>
                    <div class="text-02">跨时代多文明探索策略手游</div>
                </div>
            </div>
        </div>

        <!-- 中间内容 -->
        <div class="middle">
            <!--左侧菜单-->
            <div class="left-menu">
                <img src="../../img/02/menu-left-bar.png" class="menu-left-bar-img" alt="">
                <ul>
                    <li>
                        <img class="menu-col-bg" src="../../img/menu/menu-col-bg.png">
                        <span class="menu-text">首页</span>

                    </li>
                    <li>
                        <img class="menu-col-bg" src="../../img/menu/menu-col-bg.png">
                        <span class="menu-text">预约里程碑</span>

                    </li>
                    <li>
                        <img class="menu-col-bg" src="../../img/menu/menu-col-bg.png">
                        <span class="menu-text">邀请任务</span>

                    </li>
                    <li>
                        <img class="menu-col-bg" src="../../img/menu/menu-col-bg.png">
                        <span class="menu-text">时代文明</span>

                    </li>
                    <li>
                        <img class="menu-col-bg" src="../../img/menu/menu-col-bg-active.png">
                        <span class="menu-text">游戏特色</span>

                    </li>
                    <li>
                        <img class="menu-col-bg" src="../../img/menu/menu-col-bg.png">
                        <span class="menu-text">新闻资讯</span>

                    </li>
                </ul>
            </div>
            <div class="feature-container">
                <div class="feature-title">
                    共同绘制这文明的史诗长卷
                </div>
                <div class="feature-swiper-div">
                    <div class="swiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide slide-01"></div>
                            <div class="swiper-slide  slide-01"></div>
                            <div class="swiper-slide  slide-01"></div>
                        </div>

                        <!-- 如果需要导航按钮 -->
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>

                    </div>

                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination">
                    </div>
                    <div class="swiper-pagination-border-css"></div>
                </div>
            </div>
            <div class="mouce-icon"></div>
        </div>
        <div class="bottom"></div>
    </div>
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
    <script>
        var mySwiper = new Swiper('.swiper', {
            direction: 'horizontal', // 切换选项
            loop: true, // 循环模式选项
            centeredSlidesBounds: true,
            loopedSlides:999999999,
            slidesPerView: 2,
            slidesOffsetAfter: 640,
            centeredSlides: true,

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },

            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },

        })        
    </script>
</body>

</html>